<script setup lang="ts">
import {reqGetComment} from "@/api/comment";
import {onLoad, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import {ref} from "vue";

const query = ref<any>({
  page: 1,
  limit: 10,
  goodsId: 0
})

const list = ref([])

const loading = ref(true)

async function getComment() {
  await reqGetComment(query.value).then((res: any) => {
    if (res.code = 200) {
      if (res.data.length > 0) {
        list.value.push(...res.data)
      } else {
        loading.value = false
      }
    }
    uni.stopPullDownRefresh()
  });
}

onLoad(async (options: any) => {
  query.value.goodsId = options.id
  await getComment()
})

onReachBottom(async () => {
  if (loading.value) {
    query.value.page++
    await getComment()
  }
})

onPullDownRefresh(async () => {
  query.value.page = 1
  loading.value = true
  list.value = []
  await getComment()
})

</script>

<template>
  <view class="bar"></view>

  <view>
    <comment-item
        v-if="list.length> 0"
        v-for="(item,index) in list"
        :key="item.id"
        :item="item"
        :showBottom="true"
        :padding="20"
    ></comment-item>
    <u-empty
        v-else
        mode="comment"
        icon="http://cdn.uviewui.com/uview/empty/comment.png"
    >
    </u-empty>
    <u-divider
        v-if="!loading && list.length> 0"
        text="没有更多数据了~"
    ></u-divider>
  </view>
</template>

<style scoped lang="scss">

</style>
